
/* Container styles */
.app-container {
  display: flex;
  flex-direction: column;
  /**84 = navbar height + tags-view height**/
  height: calc(100vh - 84px);
}

/* filter-area begin */
.filter-area {
  border: 1px solid #dcdfe6;
  padding: 10px 15px;
  margin-top: 8px;
  margin-bottom: 10px;
  text-align: left;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  gap:10px
}

.filter-area .filter-item {
  vertical-align: middle;
}

.filter-area label.filter-item {
  display: inline-flex;
  align-items: center;
  height: 40px;
}

/* filter-area end */


.operation-area {
  border: 1px solid #dcdfe6;
  padding: 3px 3px;
  margin-top: 8px;
  margin-bottom: 10px;
  text-align: right;
  line-height: 1;
}

/* Fixed pagination */
.pagination-container {
  background-color: #ffffff;
  padding: 10px 0;
  margin-top: 10px;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
  position: sticky
}



/* 列表样式表格不折行和省略号样式，用::v-deep确保样式作用在表格内部 - begin*/

/* Fixed header
.el-table__header-wrapper {
  position: sticky;
  top: 0;
  z-index: 0;
  background: #c90c0c;
}*/

.el-table  .el-table__row > td {
  height: 48px;
  line-height: 48px;
  box-sizing: border-box;
  padding: 0;
}

.el-table  .el-table__row > td .cell {
  line-height: 48px;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 表头也应用相同样式 */
.el-table  .el-table__header th {
  height: 48px;
  line-height: 48px;
  box-sizing: border-box;
  padding: 0;
}

.el-table  .el-table__header th .cell {
  line-height: 48px;
  padding: 0 10px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 表格不折行和省略号样式，用::v-deep确保样式作用在表格内部 - end*/

/* Fixed dialog styles  begin*/
.fixed-dialog {
  .el-dialog {
    display: flex;
    flex-direction: column;
    height: 80vh;
  }

  .el-dialog__header {
    flex-shrink: 0;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
  }

  .el-dialog__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }
  
  .dialog-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    height: calc(100vh - 280px);
  }

  .dialog-footer {
    flex-shrink: 0;
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    background: white;
    align-items: right;
  }
  
  // Improve scrollbar style
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}

/* Fixed dialog styles  end*/